
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhui"></use>
                    </svg>
                    <div class="name">优惠</div>
                    <div class="fontclass">#icon-youhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone-line"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-phone-line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuijianunselected"></use>
                    </svg>
                    <div class="name">tuijian_unselected</div>
                    <div class="fontclass">#icon-tuijianunselected</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icotuijian"></use>
                    </svg>
                    <div class="name">ico_tuijian</div>
                    <div class="fontclass">#icon-icotuijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shape"></use>
                    </svg>
                    <div class="name">空</div>
                    <div class="fontclass">#icon-shape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu1"></use>
                    </svg>
                    <div class="name">客服</div>
                    <div class="fontclass">#icon-kefu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#icon-dianzan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yue"></use>
                    </svg>
                    <div class="name">余额</div>
                    <div class="fontclass">#icon-yue</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu2"></use>
                    </svg>
                    <div class="name">客服</div>
                    <div class="fontclass">#icon-kefu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vip"></use>
                    </svg>
                    <div class="name">vip</div>
                    <div class="fontclass">#icon-vip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanwujilu"></use>
                    </svg>
                    <div class="name">暂无记录 </div>
                    <div class="fontclass">#icon-zanwujilu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofang"></use>
                    </svg>
                    <div class="name">播放</div>
                    <div class="fontclass">#icon-bofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wanyanwendapei"></use>
                    </svg>
                    <div class="name">晚宴-问搭配</div>
                    <div class="fontclass">#icon-wanyanwendapei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fahuo"></use>
                    </svg>
                    <div class="name">送货</div>
                    <div class="fontclass">#icon-fahuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao_daisonghuo"></use>
                    </svg>
                    <div class="name">图标_待送货</div>
                    <div class="fontclass">#icon-tubiao_daisonghuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-bianjidizhi"></use>
                    </svg>
                    <div class="name">icon-编辑地址</div>
                    <div class="fontclass">#icon-icon-bianjidizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-baocuo"></use>
                    </svg>
                    <div class="name">icon-报错</div>
                    <div class="fontclass">#icon-icon-baocuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-baoxian"></use>
                    </svg>
                    <div class="name">icon-保鲜</div>
                    <div class="fontclass">#icon-icon-baoxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-caidan"></use>
                    </svg>
                    <div class="name">icon-菜单</div>
                    <div class="fontclass">#icon-icon-caidan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-baiduqianbao"></use>
                    </svg>
                    <div class="name">ac-icon</div>
                    <div class="fontclass">#icon-icon-baiduqianbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-chudian"></use>
                    </svg>
                    <div class="name">icon-厨电</div>
                    <div class="fontclass">#icon-icon-chudian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-dianzanshixin"></use>
                    </svg>
                    <div class="name">icon-点赞实心</div>
                    <div class="fontclass">#icon-icon-dianzanshixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-dianzankongxin"></use>
                    </svg>
                    <div class="name">icon-点赞空心</div>
                    <div class="fontclass">#icon-icon-dianzankongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-chuyong"></use>
                    </svg>
                    <div class="name">icon-厨用</div>
                    <div class="fontclass">#icon-icon-chuyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-dachushuohua"></use>
                    </svg>
                    <div class="name">icon-大厨说话</div>
                    <div class="fontclass">#icon-icon-dachushuohua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-dianhua"></use>
                    </svg>
                    <div class="name">icon-电话</div>
                    <div class="fontclass">#icon-icon-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-tiaoliao"></use>
                    </svg>
                    <div class="name">icon-调料</div>
                    <div class="fontclass">#icon-icon-tiaoliao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-fenxiang"></use>
                    </svg>
                    <div class="name">icon-分享</div>
                    <div class="fontclass">#icon-icon-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-dingwei"></use>
                    </svg>
                    <div class="name">icon-定位1</div>
                    <div class="fontclass">#icon-icon-dingwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-guanyuwomen"></use>
                    </svg>
                    <div class="name">icon-关于我们</div>
                    <div class="fontclass">#icon-icon-guanyuwomen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-gouwuche"></use>
                    </svg>
                    <div class="name">icon-购物车</div>
                    <div class="fontclass">#icon-icon-gouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-guanbi"></use>
                    </svg>
                    <div class="name">icon-关闭</div>
                    <div class="fontclass">#icon-icon-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-dingwei1"></use>
                    </svg>
                    <div class="name">icon-定位2</div>
                    <div class="fontclass">#icon-icon-dingwei1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-jiantou"></use>
                    </svg>
                    <div class="name">icon-肩头</div>
                    <div class="fontclass">#icon-icon-jiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-huahui"></use>
                    </svg>
                    <div class="name">icon-花卉</div>
                    <div class="fontclass">#icon-icon-huahui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-ladukongxin"></use>
                    </svg>
                    <div class="name">icon-辣度空心</div>
                    <div class="fontclass">#icon-icon-ladukongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-jiushui"></use>
                    </svg>
                    <div class="name">icon-酒水</div>
                    <div class="fontclass">#icon-icon-jiushui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-juli"></use>
                    </svg>
                    <div class="name">icon-距离</div>
                    <div class="fontclass">#icon-icon-juli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-ladushixin"></use>
                    </svg>
                    <div class="name">icon-辣度实心</div>
                    <div class="fontclass">#icon-icon-ladushixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-nandushixin"></use>
                    </svg>
                    <div class="name">icon-难度实心</div>
                    <div class="fontclass">#icon-icon-nandushixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-queding"></use>
                    </svg>
                    <div class="name">icon-确定</div>
                    <div class="fontclass">#icon-icon-queding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-nandukongxin"></use>
                    </svg>
                    <div class="name">icon-难度空心</div>
                    <div class="fontclass">#icon-icon-nandukongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-pinglunzhanshi"></use>
                    </svg>
                    <div class="name">icon-评论展示</div>
                    <div class="fontclass">#icon-icon-pinglunzhanshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-liangyou"></use>
                    </svg>
                    <div class="name">icon-粮油</div>
                    <div class="fontclass">#icon-icon-liangyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-mima"></use>
                    </svg>
                    <div class="name">icon-密码</div>
                    <div class="fontclass">#icon-icon-mima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-roulei"></use>
                    </svg>
                    <div class="name">icon-肉类</div>
                    <div class="fontclass">#icon-icon-roulei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shezhi"></use>
                    </svg>
                    <div class="name">icon-设置</div>
                    <div class="fontclass">#icon-icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shizhong"></use>
                    </svg>
                    <div class="name">icon-时钟</div>
                    <div class="fontclass">#icon-icon-shizhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shouji"></use>
                    </svg>
                    <div class="name">icon-手机</div>
                    <div class="fontclass">#icon-icon-shouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shouyeicon"></use>
                    </svg>
                    <div class="name">icon-首页icon2</div>
                    <div class="fontclass">#icon-icon-shouyeicon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shouyeicon1"></use>
                    </svg>
                    <div class="name">icon-首页icon1</div>
                    <div class="fontclass">#icon-icon-shouyeicon1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shouyeicon2"></use>
                    </svg>
                    <div class="name">icon-首页icon3</div>
                    <div class="fontclass">#icon-icon-shouyeicon2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shouyeicon3"></use>
                    </svg>
                    <div class="name">icon-首页icon4</div>
                    <div class="fontclass">#icon-icon-shouyeicon3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-sousuo"></use>
                    </svg>
                    <div class="name">icon-搜索</div>
                    <div class="fontclass">#icon-icon-sousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-tuijianshangpin"></use>
                    </svg>
                    <div class="name">icon-推荐商品</div>
                    <div class="fontclass">#icon-icon-tuijianshangpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-weixinzhifu"></use>
                    </svg>
                    <div class="name">icon-微信支付</div>
                    <div class="fontclass">#icon-icon-weixinzhifu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wodedingdan"></use>
                    </svg>
                    <div class="name">icon-我的订单</div>
                    <div class="fontclass">#icon-icon-wodedingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-xiangguanshangpin"></use>
                    </svg>
                    <div class="name">icon-相关商品</div>
                    <div class="fontclass">#icon-icon-xiangguanshangpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shuguo"></use>
                    </svg>
                    <div class="name">icon-蔬果</div>
                    <div class="fontclass">#icon-icon-shuguo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-xiepinglun"></use>
                    </svg>
                    <div class="name">icon-写评论</div>
                    <div class="fontclass">#icon-icon-xiepinglun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-zhifubao"></use>
                    </svg>
                    <div class="name">icon-支付宝</div>
                    <div class="fontclass">#icon-icon-zhifubao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-yingyangchengfen"></use>
                    </svg>
                    <div class="name">icon-营养成份</div>
                    <div class="fontclass">#icon-icon-yingyangchengfen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wifi"></use>
                    </svg>
                    <div class="name">icon-wifi</div>
                    <div class="fontclass">#icon-icon-wifi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-zhifuchenggong"></use>
                    </svg>
                    <div class="name">icon-支付成功</div>
                    <div class="fontclass">#icon-icon-zhifuchenggong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-jiantoushang"></use>
                    </svg>
                    <div class="name">icon-肩头上</div>
                    <div class="fontclass">#icon-icon-jiantoushang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-jiantouxia"></use>
                    </svg>
                    <div class="name">icon-肩头下</div>
                    <div class="fontclass">#icon-icon-jiantouxia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wugouwuche"></use>
                    </svg>
                    <div class="name">icon-无购物车</div>
                    <div class="fontclass">#icon-icon-wugouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wudizhi"></use>
                    </svg>
                    <div class="name">icon-无地址</div>
                    <div class="fontclass">#icon-icon-wudizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wuyouhuiquan"></use>
                    </svg>
                    <div class="name">icon-无优惠券</div>
                    <div class="fontclass">#icon-icon-wuyouhuiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icontuan1"></use>
                    </svg>
                    <div class="name">团购</div>
                    <div class="fontclass">#icon-icontuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-tianjia"></use>
                    </svg>
                    <div class="name">icon-添加</div>
                    <div class="fontclass">#icon-icon-tianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shibai"></use>
                    </svg>
                    <div class="name">icon-失败</div>
                    <div class="fontclass">#icon-icon-shibai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-youhuiquan"></use>
                    </svg>
                    <div class="name">icon-优惠券</div>
                    <div class="fontclass">#icon-icon-youhuiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-yishixiao"></use>
                    </svg>
                    <div class="name">icon-已失效</div>
                    <div class="fontclass">#icon-icon-yishixiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-yishiyong"></use>
                    </svg>
                    <div class="name">icon-已使用</div>
                    <div class="fontclass">#icon-icon-yishiyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-yiguoqi"></use>
                    </svg>
                    <div class="name">icon-已过期</div>
                    <div class="fontclass">#icon-icon-yiguoqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-bofang"></use>
                    </svg>
                    <div class="name">icon-播放</div>
                    <div class="fontclass">#icon-icon-bofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-jiarugouwuchechenggong"></use>
                    </svg>
                    <div class="name">icon-加入购物车成功</div>
                    <div class="fontclass">#icon-icon-jiarugouwuchechenggong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-tianjiatupian"></use>
                    </svg>
                    <div class="name">icon-添加图片</div>
                    <div class="fontclass">#icon-icon-tianjiatupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-yijianfankui"></use>
                    </svg>
                    <div class="name">icon-意见反馈</div>
                    <div class="fontclass">#icon-icon-yijianfankui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-dizhiguanli"></use>
                    </svg>
                    <div class="name">icon-地址管理</div>
                    <div class="fontclass">#icon-icon-dizhiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-queding1"></use>
                    </svg>
                    <div class="name">icon-确定</div>
                    <div class="fontclass">#icon-icon-queding1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wudingdan"></use>
                    </svg>
                    <div class="name">icon-无订单</div>
                    <div class="fontclass">#icon-icon-wudingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wupinglun"></use>
                    </svg>
                    <div class="name">icon-无评论</div>
                    <div class="fontclass">#icon-icon-wupinglun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wuerji"></use>
                    </svg>
                    <div class="name">icon-无二级</div>
                    <div class="fontclass">#icon-icon-wuerji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-wudanpin"></use>
                    </svg>
                    <div class="name">icon-无单品</div>
                    <div class="fontclass">#icon-icon-wudanpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiandao"></use>
                    </svg>
                    <div class="name">签到</div>
                    <div class="fontclass">#icon-qiandao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan1"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#icon-dianzan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shijian"></use>
                    </svg>
                    <div class="name">icon-shijian</div>
                    <div class="fontclass">#icon-icon-shijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-manquan"></use>
                    </svg>
                    <div class="name">icon-manquan</div>
                    <div class="fontclass">#icon-icon-manquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhui1"></use>
                    </svg>
                    <div class="name">优惠</div>
                    <div class="fontclass">#icon-youhui1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pause"></use>
                    </svg>
                    <div class="name">暂停</div>
                    <div class="fontclass">#icon-pause</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yue1"></use>
                    </svg>
                    <div class="name">钱包</div>
                    <div class="fontclass">#icon-yue1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipinbofang"></use>
                    </svg>
                    <div class="name">视频播放</div>
                    <div class="fontclass">#icon-shipinbofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu"></use>
                    </svg>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">#icon-kefu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu-copy"></use>
                    </svg>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">#icon-kefu-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuezhifu"></use>
                    </svg>
                    <div class="name">余额支付</div>
                    <div class="fontclass">#icon-yuezhifu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuangou"></use>
                    </svg>
                    <div class="name">团购</div>
                    <div class="fontclass">#icon-tuangou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantout"></use>
                    </svg>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">#icon-jiantout</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shijiantoub"></use>
                    </svg>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">#icon-shijiantoub</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nosearch"></use>
                    </svg>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">#icon-nosearch</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">右箭头</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-copy"></use>
                    </svg>
                    <div class="name">右箭头</div>
                    <div class="fontclass">#icon-icon-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-yaoqing"></use>
                    </svg>
                    <div class="name">icon-邀请</div>
                    <div class="fontclass">#icon-icon-yaoqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-vip4"></use>
                    </svg>
                    <div class="name">icon-vip4</div>
                    <div class="fontclass">#icon-icon-vip4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-vip0"></use>
                    </svg>
                    <div class="name">icon-vip0</div>
                    <div class="fontclass">#icon-icon-vip0</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-vip1"></use>
                    </svg>
                    <div class="name">icon-vip1</div>
                    <div class="fontclass">#icon-icon-vip1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-vip2"></use>
                    </svg>
                    <div class="name">icon-vip2</div>
                    <div class="fontclass">#icon-icon-vip2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-vip3"></use>
                    </svg>
                    <div class="name">icon-vip3</div>
                    <div class="fontclass">#icon-icon-vip3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dazhongdianping"></use>
                    </svg>
                    <div class="name">大众点评</div>
                    <div class="fontclass">#icon-dazhongdianping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_huati"></use>
                    </svg>
                    <div class="name">icon_话题</div>
                    <div class="fontclass">#icon-icon_huati</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_biaoqing"></use>
                    </svg>
                    <div class="name">icon_表情</div>
                    <div class="fontclass">#icon-icon_biaoqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_guanlianshangpin"></use>
                    </svg>
                    <div class="name">icon_关联商品</div>
                    <div class="fontclass">#icon-icon_guanlianshangpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_fatie"></use>
                    </svg>
                    <div class="name">icon_发帖</div>
                    <div class="fontclass">#icon-icon_fatie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_shequ"></use>
                    </svg>
                    <div class="name">icon_社区</div>
                    <div class="fontclass">#icon-icon_shequ</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_chuantu"></use>
                    </svg>
                    <div class="name">icon_传图</div>
                    <div class="fontclass">#icon-icon_chuantu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_shanchu"></use>
                    </svg>
                    <div class="name">icon_删除</div>
                    <div class="fontclass">#icon-icon_shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_fatie1"></use>
                    </svg>
                    <div class="name">icon_发帖2</div>
                    <div class="fontclass">#icon-icon_fatie1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-quan"></use>
                    </svg>
                    <div class="name">icon-圈</div>
                    <div class="fontclass">#icon-icon-quan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_bofang-"></use>
                    </svg>
                    <div class="name">icon_播放-102</div>
                    <div class="fontclass">#icon-icon_bofang-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_fenxiang-"></use>
                    </svg>
                    <div class="name">icon_分享-101</div>
                    <div class="fontclass">#icon-icon_fenxiang-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_chihuoshuo"></use>
                    </svg>
                    <div class="name">icon_吃货说</div>
                    <div class="fontclass">#icon-icon_chihuoshuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hongjiujiubei"></use>
                    </svg>
                    <div class="name">红酒+酒杯</div>
                    <div class="fontclass">#icon-hongjiujiubei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-jiantouback"></use>
                    </svg>
                    <div class="name">icon-肩头</div>
                    <div class="fontclass">#icon-icon-jiantouback</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-bianjidizhi-copy"></use>
                    </svg>
                    <div class="name">icon-编辑地址</div>
                    <div class="fontclass">#icon-icon-bianjidizhi-copy</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
